<template>
  <div class="home">
    <ChangeSkin msg="Welcome to Your Vue.js App" />
    <Timer />
    <a-input placeholder="Basic usage" class="mt-2" />
  </div>
</template>

<script>
// @ is an alias to /src
import ChangeSkin from "@/components/ChangeSkin.vue";
import Timer from "@/components/Timer.vue";
import { Input as aInput } from "ant-design-vue";
// import Card from "@/components/Card.vue";

export default {
  name: "Home",
  components: {
    ChangeSkin,
    Timer,
    aInput,
    // Card,
  },
};
</script>

<style lang="less">
.home {
  background-color: var(--primary);
  color: var(--fontColor) !important;
  padding: 20px;
  height: 100vh;

  h1 {
    color: var(--fontColor) !important;
  }
}

.ant-input {
  background-color: var(--primary) !important ;
  // border: none !important;
}
</style>
